<template>
    <div class="edit">
        <div class="main">
            <div class="header">
                编辑动态
            </div>
            <div class="dance">
                标题
            </div>
            <div class="dance-two">
                <div class="span"></div>
                <el-input  class="inp" size="large" v-model="data.title"  maxlength="32" placeholder="Please input" show-word-limit
                    type="text" />
            </div>

            <div class="dance">
                封面
                <span>(为了保证展示效果，请上传宽高比例为16:9，大小不超过4M的图片，支持jpg、png、gif)</span>
            </div>

            <div class="dance-item">
                <div class="span"></div>
                <div class="img">
                    <img class="img-one" :src="data.cover[0]">
                </div>
            </div>

            <div class="details">
                详情信息
                <div class="span"></div>
                <div class="interest">
                    兴趣技能 ：
                    <el-tag class="el-tag" closable type="success" size="large" v-for="(tag,index) in data.tags" :key="index">
                        {{ tag.name }}
                    </el-tag>
                </div>
                <div class="Switch">
                    <span>本人原创声明 ：</span>
                    <span style="padding-left: 32px;">未声明 ：</span>
                    <el-switch class="ml-2" style="--el-switch-on-color: #f93684; --el-switch-off-color: #dcdfe6" />
                </div>

                <div class="Works">
                    <div class="span"></div>
                    作品来源：
                    <div class="mb-2 flex items-center text-sm">
                        <el-radio-group class="ml-4">
                            <el-radio label="1" size="large" style="color: #f93684;">原创</el-radio>
                            <el-radio label="2" size="large">改编</el-radio>
                        </el-radio-group>
                    </div>
                </div>

                <div class="Works-two">
                    <div class="span"></div>
                    原创作者：
                    <el-input class="inp" size="large" v-model="data.creatorBackup.name" maxlength="64" placeholder="Please input" show-word-limit
                        type="text" />
                </div>

                <div class="Works-two">
                    <div class="span"></div>
                    作品内容：
                    <el-input class="input" v-model="data.moreBackup.richText" placeholder="Please input" show-word-limit type="textarea" />
                </div>

                <div class="Works-two">
                    可见范围：
                    <el-select class="m-2" placeholder="全部可见" size="large" style="padding-left: 30px;">
                        <el-option />
                    </el-select>
                </div>


                <div class="Check">
                    <el-button class="btn" type="danger" :icon="Check" danger />
                    <span>我承诺：遵守《用户服务协议》，维护用户合法权益；不以任何方式提供或索要手机号、微信号、抖音号等第三方号码；遵守著作权法，确保发布上传的图文、音视频等</span>
                    <p>不侵犯 第三方合法权利，自行承担全部风险和责任。</p>
                </div>

            </div>

        </div>
        <button class="Button">发布</button>
    </div>

</template>

<script lang="ts" setup>
import { Check } from '@element-plus/icons-vue'
import type { ContentModel } from '@/api/resource';
import { computed, onMounted, ref } from 'vue';
import { useRoute } from 'vue-router'
import useResourceStore from '@/store/modules/resource';
const resourceStore = useResourceStore()
const route = useRoute()
// const data = ref<ContentModel>()
// onMounted( async () => {
//     let result = await resourceApi.edit(route.query.momentId as string)
//     console.log(result)
//     data.value = result
// })
const data = computed(() => {
    return resourceStore.dynamicData.content[1]
})
</script>

<style scoped lang="less">
.edit {
    width: 100%;
    background: #f5f7f9;
}

.main {
    width: 1200px;
    margin: 0 auto;
}

.header {
    width: 1200px;
    height: 68px;
    margin-top: 20px;
    background-color: #ffff;
    border-radius: 5px;
    color: #111;
    font-size: 14px;
    font-weight: 500;
    line-height: 68px;
    padding-left: 30px
}

.dance {
    width: 1200px;
    height: 53px;
    margin-top: 10px;
    background-color: #ffff;
    border-radius: 5px;
    color: #111;
    font-size: 14px;
    font-weight: 500;
    line-height: 53px;
    padding-left: 30px
}

.dance span {
    font-size: 12px;
    color: rgb(177, 181, 193);
}

.dance-two {
    width: 100%;
    height: 98px;

    margin-top: 1px;
    background-color: #ffff;
    border-radius: 5px;
    padding-left: 30px;
    position: relative;
}

.dance-two .span {
    width: 6px;
    height: 6px;
    background: #f56c6c;
    border-radius: 50%;
    position: absolute;
    left: 30px;
    top: 50%;
}

.dance-two .inp {
    padding-top: 30px;
    padding-left: 30px;
    width: 950px;
}

.dance-item {
    width: 100%;
    height: 262px;
    margin-top: 1px;
    background-color: #ffff;
    border-radius: 5px;
    padding-left: 30px;
    position: relative;
    padding-top: 40px;
}

.dance-item .span {
    width: 6px;
    height: 6px;
    background: #f56c6c;
    border-radius: 50%;
    position: absolute;
    left: 30px;
    top: 20%;
}

.dance-item .img {
    width: 300px;
    height: 168px;
    margin-left: 30px;
    .img-one {
        width: 100%;
        height: 100%;
        border-radius: 10px;
    }
}

.details {
    width: 1200px;
    height: 600px;
    position: relative;
    margin-top: 20px;
    background-color: #ffff;
    border-radius: 5px;
    color: #111;
    font-size: 14px;
    font-weight: 500;
    line-height: 68px;
    padding-left: 40px;
}

.details .span {
    width: 6px;
    height: 6px;
    background: #f56c6c;
    border-radius: 50%;
    position: absolute;
    left: 40px;
    top: 18%;
}

.interest {
    padding-left: 24px;
    color: #111;
    padding-top: 8px;
}

.interest .el-tag {
    margin-left: 10px;
}

.Switch {
    padding-left: 24px;
    color: #111;
    padding-top: 15px;
}

.Works {
    padding-left: 24px;
    color: #111;
    // padding-top: 8px;
}

.Works .span {
    width: 6px;
    height: 6px;
    background: #f56c6c;
    border-radius: 50%;
    position: absolute;
    left: 40px;
    top: 43%;
}

.Works .mb-2 {
    position: absolute;
    top: 38%;
    left: 170px;
}

.Works-two {
    padding-left: 24px;
    color: #111;
    // padding-top: 8px;
}

.Works-two .span {
    width: 6px;
    height: 6px;
    background: #f56c6c;
    border-radius: 50%;
    position: absolute;
    left: 40px;
    top: 54%;
}

.Works-two .inp {
    // padding-top: 10px;
    padding-left: 30px;
    width: 760px;
}

.Works-two .span {
    width: 6px;
    height: 6px;
    background: #f56c6c;
    border-radius: 50%;
    position: absolute;
    left: 40px;
    top: 394px;
}

.Works-two .input {
    position: absolute;
    left: 168px;
    top: 370px;
    width: 920px;
}

.Check {
    padding-left: 30px;
}

.Check .btn {
    width: 20px;
    height: 30px;
}

.Check span {
    margin: 0;
    line-height: 24px;
    margin-left: 10px;
    color: #7d8090;
}

.Check p {
    margin-top: -44px;
    margin-left: 42px;
    color: #7d8090;
}

.Button {
    width: 180px;
    height: 50px;
    padding: 10px 20px;
    margin-top: 16px;
    margin-left: 246px;
    margin-bottom: 52px;
    font-size: 14px;
    border-radius: 4px;
    color: #fff;
    background-color: #f93684;
    border-color: #f93684;
}
</style>